<!--table中显示头像
https://www.cnblogs.com/congfeicong/p/11038119.html
-->
<template>
    <div>

      <el-row>
        <el-col :span="15">
        <el-button @click="selectAllOrNo">全选/反选</el-button>
          <router-link to="/admin/vip/manage/open"><el-button type="primary" >开通</el-button></router-link>
          <el-button class="el-icon-medal-1" type="success"><a :href="vipBuyUrl" target="_blank">购买VIP</a></el-button>
        <el-button type="primary" @click="save('add','',true)" v-if="addFlag">添加</el-button>
        <el-button type="primary" @click="save('update','material',true)" v-if="updateFlag">修改</el-button>
        <el-button type="primary" @click="del('del')" v-if="delFlag">删除</el-button>
        </el-col>
        <el-col :span="5">
          <!-- 搜索框 -->
          <span>
          <el-input placeholder="请输入搜索内容" v-model="search"></el-input>
        </span>
        </el-col>
        <el-col :span="1">
          <!-- 搜索按钮 -->
          <el-button class="ico" icon="el-icon-search" @click="pageQuery"></el-button>
        </el-col>
      </el-row>

      <hr/>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize">
        </el-pagination>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="用户账号"   prop="userId" width="120">
          　　
        </el-table-column>
        <el-table-column
          prop="startDate"
          label="开通时间"
          width="180"
        >
          <template slot-scope="scope">{{dateUtil.stringParseDate( scope.row.startDate ,dateUtil.YYYY_MM_DD)}}</template>
        </el-table-column>
        <el-table-column
          prop="endDate"
          label="到期时间"
          width="180"
        >
          <template slot-scope="scope">{{dateUtil.stringParseDate( scope.row.endDate ,dateUtil.YYYY_MM_DD)}}</template>
        </el-table-column>


        <el-table-column
          prop="levelId"
          label="vip级别"
          width="180">
        </el-table-column>
        <el-table-column
          prop="canDownNumber"
          label="可下载数量"
          width="180">
        </el-table-column>

        <el-table-column
          prop="voucherId"
          label="vip卷"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="isAvailable"
          label="是否有效"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="vipType"
          label="vip类型"
          width="180"
        >
        </el-table-column>

      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize">
        </el-pagination>
      </div>
    </div>
</template>

<script>
import {BasePageReq} from "../../req/BasePageReq";
import {ContentType} from "../../../constant/ContentType";
  import {StringUtil} from "../../../../utils/StringUtil";
  import {ResultStatus} from "../../../constant/ResultStatus";
  import {DateUtil} from "../../../../utils/DateUtil";
  import {Handle} from "../../../constant/Handle";
  import {User} from "../../req/User";
  import {UserPower} from "../../../constant/UserPower";

export default {
    data() {
      return {
        tableData: [],//返回的表格数据
        multipleSelection: [], //选中的表格数据
        selectFlag:true,//全选开关

        currentPage: 1,
        search:"",//搜索字段
        totalSize:1,
        size:100,
        dateUtil:DateUtil,
        baseURL: this.$axios.defaults.baseURL,
        baseIMG:this.$axios.defaults.baseIMG,
        addFlag:false,
        updateFlag:false,
        delFlag:false,
        userInfo:this.$store.getters.getUserInfo,
        fileServer:this.$axios.defaults.fileServer,
        vipBuyUrl: this.$axios.defaults.vipBuyUrl,

      }
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      /**
       * 全选/反选
       */
      selectAllOrNo(){
        if(this.selectFlag){
          this.toggleSelection(this.tableData);
        }
        else{
          this.toggleSelection();
        }
        this.selectFlag = !this.selectFlag;
      },
      handleSizeChange(val) {
          this.size = val;
          this.pageQuery();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.pageQuery();
      },
      save(handle,type,adminFlag){
        let id = "";
        if(handle==Handle.UPDATE || handle==Handle.QUERY){
          if(this.multipleSelection.length<1){
            this.$notify(StringUtil.warning("请选中数据行"))
            return;
          }
          if(this.multipleSelection.length>1){
            this.$notify(StringUtil.warning("请不要多选"))
            return;
          }
         id =  this.multipleSelection[0].id;
        }

        this.$router.push({name:"vipManageAdd",query:{handle:handle,type:type,adminFlag:adminFlag,id:id}});
      },
      /**
       * 分布搜索
       */
      pageQuery(){
        let basePageReq = new BasePageReq();
        basePageReq.size = this.size;
        basePageReq.page = this.currentPage;
        basePageReq.des  = this.search;
        this.$axios
          .post('/vip/manage/queryPage',
            basePageReq, //转成json
            ContentType.APPLICATION_JSON,
          )
          .then((response)=>{
            let datas = response.data;
            if(datas.code != ResultStatus.SUCCESS){
              this.$notify(StringUtil.warning(datas.msg));
              return;
            }
            let datas2 = datas.data;
            this.totalSize =  datas2.totalSize;
            this.tableData = datas2.list;
          })
          .catch((error)=>{
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })
      },
      /**
       * 预览图
       * @param data
       * @returns {string}
       */
      getImgsURL(data){
        if(StringUtil.checkNull(data)){
          return  this.baseIMG;
        }
        return  this.fileServer+StringUtil.replace(data,'\\','/');
      },
      /**
       * 删除
       * @param handler
       */
      del :async function(handler){
        if(this.multipleSelection.length<1){
          this.$notify(StringUtil.warning("请选中数据行"))
          return;
        }
        let flag  = await this.confirmBox();
        if(!flag){
          return;
        }

        for(let i = 0;i<this.multipleSelection.length;i++){
          let user = new User();
          user.id = this.multipleSelection[i].id;
          user.handle=Handle.DEL;
          this.$axios
            .post('/vip/manage/save',
              user, //转成json
              ContentType.APPLICATION_JSON,
            )
            .then((response)=>{

              let datas = response.data;
              if(datas.code == ResultStatus.SUCCESS){
                this.$notify(StringUtil.success(datas.msg));
              }
              else{
                this.$notify(StringUtil.warning(datas.msg));

              }
            })
            .catch((error)=>{
              console.log(error);
              let datas = error.data;
              this.$notify(StringUtil.warning(datas.msg));
            })
        }
        location.reload();//重新加载当前页面
      },
  /**
   * 确认框
   * @returns {boolean}
   */
  confirmBox: async function(){
    let flag = false;
    await  this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.$message({
        type: 'success',
        message: '删除中。。。!'
      });
      flag = true;
    }).catch(() => {
      this.$message({
        type: 'warning',
        message: '已取消删除'
      });
      flag = false;
    });
    return flag;
  },
      /**
       *
       */
      initFlag(){
        if(this.userInfo.power != UserPower.Users){
          this.addFlag = true;
          this.updateFlag = true;
          this.delFlag = true;
        }
      }

    },
    mounted() {
      this.pageQuery();
      this.initFlag()

    },
  created() {

  }
}
</script>

<style scoped>

</style>
